
$("header").load("header.html",function(){
	
	$(".site-category").css({
		display:"none",
		backgroundColor:"#fff",
		border:"1px solid red",
	});
	$(".title").css({
		color:"#424242"
	})
	$(".nav-category").hover(function(){
		$(".site-category").css({
			display:"block",
		});
	},function(){
		$(".site-category").css({
			display:"none"
		});
	}
	)
	$(".title").hover(
	function(){
		$(this).css({color:"#fff"})
	},function(){
		$(this).css({color:"#424242"})
	})
});
$("footer").load("footer.html");







function canshu(){
		let url = location.search; //获取url中"?"符后的字串
		let text = url.split("=")[1];
		return text;
	}
	

$.ajax({
	url:"./php/data.php",
	type:"get",
	data:{
		id:canshu()
	},
	success:function(resText){
		
		let json = JSON.parse(resText);
		$("#small").css({
			background:json.URL,
			backgroundSize:"100%",
			
		})
		$("#bigBox").css({
			background:json.URL,
		})
		$("#munu").hide();
		$(".ipone-name").html(json.name);
		$(".price").html(json.price)
	}
})













$(".clearfixTop  li").click(function(){
	$(".clearfixTop li").removeClass("active")
$(this).addClass("active")})

$(".clearfixBtn  li").click(function(){
	$(".clearfixBtn li").removeClass("active")
$(this).addClass("active")})


// 喜欢按钮

$(".favorite-btn").click(function(){
	$(".xihuan").removeClass(".xihuan").addClass("xihuanred")
})






// 放大镜
 $(function() {
 	$("#small,munu li").mouseenter(function() {
 		$("#mark,#bigBox").show()
 	}).mouseleave(function() {
 		$("#mark,#bigBox").hide()
 	}).mousemove(function(evt) {
 		//改变遮罩层位置
 		let e = evt || event
 		let l = e.pageX - $(this).offset().left- 100;
 		let t = e.pageY - $(this).offset().top-100;
 		if(l <= 0){
 			l =0;
 		}
 		if( l >=200){
 			l = 200
 		}
 		if(t <=0){
 			t = 0;
 		}
 		if(t >= 200){
 			t = 200
 		}
 		$("#mark").css({
 			left: l,
 			top:t
 		})
		$("#bigBox").css({
			
			backgroundPositionX:-2 * l,
			backgroundPositionY:-2 * t,
		})
 		
 		//同时改变放大图片的位置，四倍于遮罩层的位置，注意反方向
 		
 	})
	for(let i=0 ;i <$("#munu li").length;i++){
		$("#munu").find("li").each(function(){
			$(this).mouseover(function(){
				let j = $(this).index()
			$("#small").css({
				background:`url(./imgs/${j}.jpg)`,
				backgroundSize: "100%"
			})
			$("#bigBox").css({
				background:`url(./imgs/${j}.jpg)`,
			})
			
		})
		})
	}
 })

 
 